<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
  <link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

  <!-- 引入页码的css -->
  <link rel="stylesheet" href="./lib/page/jquery.pagination.css">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  <style>
    .wrap {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: url('images/bg03.jpg') center bottom no-repeat;
      overflow: auto;
    }

    .navbar-brand {
      padding: 10px 15px;
    }

    .logout {
      font-weight: 900;
      font-size: 20px;
      color: #ff0000;
      text-decoration: none;
    }

    .logout:hover {
      text-decoration: none;
      color: yellowgreen;
    }

    #my-table th {
      text-align: center;
    }

    #my-table td {
      text-align: center;
      line-height: 80px;
      padding: 0;
      padding: 10px;
    }

    td img {
      width: 80px;
      height: 80px;
    }

    .username {
      font-weight: 900;
      color: hotpink;
      background-color: yellowgreen;
    }

    .pagination {
      margin: 0px;
      padding: 0px;
      font-size: 0;
      line-height: 1;
    }

    .pagination li {
      display: inline-block;
      font-size: 14px;
    }

    .mp15 {
      margin-top: 15px;
    }

    .table {
      margin-bottom: 0;
    }

    .table-bordered>thead>tr>td,
    .table-bordered>thead>tr>th {
      border-bottom-width: 1px;
    }

    .page-title {
      font-size: 16px;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <nav class="navbar  navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mymenu">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
        </div>
      </div>
    </nav>

    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="panel panel-default">
            <div class="panel-heading clearfix">
              <div class="row">
                <div class="col-md-6 page-title">英雄列表</div>
                <div class="col-md-6 text-right">当前位置：首页</div>
              </div>
            </div>
            <div class="panel-body">
              <!-- action 不写 就是当前页面 method 不写 就是 get -->
              <div class="row">
                <div class="col-md-9">
                  <form class="form-inline">
                    <div class="form-group">
                      <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
                      <div class="input-group">
                        <div class="input-group-addon">英雄姓名</div>
                        <input type="text" id="search" class="form-control" name="search" placeholder="请输入查询内容" />
                      </div>
                    </div>
                    <button type="submit" class="btn btn-default">查找</button>

                  </form>
                </div>
                <div class="col-md-3">
                  <a href="./add.html" class="btn btn-success pull-right">新增</a>
                </div>

              </div>

              <table id="my-table" class="table table-bordered mp15">
                <thead>
                  <tr>
                    <th width="20%">头像</th>
                    <th width="20%">姓名</th>
                    <th width="20%">昵称</th>
                    <th width="20%">技能</th>
                    <th width="20%">操作</th>
                  </tr>
                </thead>
                <tbody>

                  <!-- 这里由模板渲染 -->

                </tbody>
              </table>
            </div>
            <div class="panel-footer text-center">
              <!-- <ul class="pagination">
                <li>
                  <a href="#" aria-label="Previous">
                    <span aria-hidden="true">«</span>
                  </a>
                </li>
                <li class="page-num"><a href="#">1/1</a></li>
                <li>
                  <a href="#" aria-label="Next">
                    <span aria-hidden="true">»</span>
                  </a>
                </li>
              </ul> -->
              <!-- 页码 -->
              <div id="pagination" class="page"></div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="./lib/bootstrap/js/jquery-1.12.4.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
  <script src="./lib/js/template-web.js"></script>

  <!-- 引入页码的js -->
  <script src="./lib/page/jquery.pagination.min.js"></script>

  <script src="./lib/js/baseAPI.js"></script>



  <!-- 模板 -->
  <script type="text/html" id="list">
    {{each data n}}
    <tr>
      <td><img src="http://localhost:3006/{{n.avatar_url}}" alt="" /></td>
      <td>{{n.heroName}}</td>
      <td>{{n.heroNickName}}</td>
      <td>{{n.skillName}}</td>
      <td>
        <button onclick="location.href='./edit.html?id={{n.id}}'" class="btn btn-primary">编辑</button>
        <button data-id="{{n.id}}" class="btn btn-danger deleteHero">删除</button>
      </td>
    </tr>
    {{/each}}
  </script>



  <script>
    var data = {
      pagenum: 1
    }
    getData()
    function getData() {
      $.ajax({
        type: 'GET',
        url: '/my/heroeslist',
        data: data,
        
        success: function (res) {
          if (res.status == 0) {
            console.log(res)
            var strHtml = template('list', res);
            $('tbody').html(strHtml)
            // 调用showPage
            showPage(res.total)
          }
        }
      })
    }


    function showPage(t) {
      $("#pagination").pagination({
        currentPage: data.pagenum,
        totalPage: t,
        callback: function (current) {
          // alert('ok!');
          data.pagenum = current;
          getData()
        }
      });
    }


    // 模糊搜索
    $('.form-inline').on('submit',function(e) {
      e.preventDefault();
      var keywords = $('#search').val().trim();
      data.keywords = keywords;
      getData()
      // $('#search').val('')
      this.reset()
    })
  
    // 删除
    $('body').on('click','.deleteHero',function(e) {
      e.preventDefault();
      if(!confirm('确定要删除吗')) {
        return
      }
      var id = $(this).attr('data-id');
      $.ajax({
        type:'GET',
        url:'/my/deletehero',
        data:{id:id},
        
        success:function(res) {
          alert(res.message);
          if(res.status == 0) {
            getData()
          }
        }
      })
    })
  </script>
</body>

</html>